<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
		<style type="text/css">
			
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				border: 0;
				outline: 0;
				font-size: 100%;
				vertical-align: baseline;
				background: transparent;
			}
			@font-face {
				font-family:"汗可";
				src: url(../font/HYZhengYuan-75W-2.otf);
			}
			.wai{
				width: 100%;
				height: 100%;
				background-color: rgba(52, 154, 181, 0.9);
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.cent{
				display: flex;
				flex-direction:column;
				align-items: center;
				
			}
			#main1{
				margin: 20px;
				font-size: 110px;
				font-family: "汗可";
			}
			.set{
				width: 310px;
				height: 100px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.set select,.set button{
				height: 50px;
				border: 1px solid #C0C0AA;
				border-radius: 10px;
			}
			.set select{
				width: 50%;
				font-size: 120%;
			}
			.set button{
				width: 30%;
				font-size: 150%;
			}
			
		</style>
	</head>
	<body>
	
<div class="wai" id="app">
		<div class="cent">
			<div id="main1">
				我很方
			</div>
			<div class="set">
				<select id="cd-dropdown" class="cd-select"  @change="sele">
					<option  v-for="item in list" :key='item.name' :value="item.name" >{{item.name}}</option>
				</select>
				<button v-on:click="agen">再一次</button>
			</div>
		</div>
	
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var app = new Vue({
				el: "#app",
				data: {
					list:[
					{name:"bounce"},{name:"flash"},{name:"pulse"},
					{name:"rubberBand"},{name:"shake"},{name:"swing"},
					{name:"tada"},{name:"wobble"},{name:"jello"},
					{name:"bounceIn"},{name:"bounceInDown"},{name:"bounceInLeft"},
					{name:"bounceInRight"},{name:"bounceInUp"},{name:"bounceOut"},
					{name:"bounceOutDown"},{name:"bounceOutLeft"},{name:"bounceOutRight"},
					{name:"bounceOutUp"},{name:"fadeIn"},{name:"fadeInDown"},
					{name:"fadeInLeft"},{name:"fadeInDownBig"},{name:"fadeInLeftBig"},
					{name:"fadeInRight"},{name:"fadeInRightBig"},{name:"fadeInUp"},
					{name:"fadeInUpBig"},{name:"fadeOut"},{name:"fadeOutDown"},
					{name:"fadeOutDownBig"},{name:"fadeOutLeft"},{name:"fadeOutLeftBig"},
					{name:"fadeOutRight"},{name:"fadeOutRightBig"},{name:"fadeOutUp"},
					{name:"fadeOutUpBig"},{name:"flipInX"},{name:"flipInY"},
					{name:"flipOutX"},{name:"flipOutY"},{name:"lightSpeedIn"},
					{name:"lightSpeedOut"},{name:"rotateIn"},{name:"rotateInDownLeft"},
					{name:"rotateInDownRight"},{name:"rotateInUpLeft"},{name:"rotateInUpRight"},
					{name:"rotateOut"},{name:"rotateOutDownLeft"},{name:"rotateOutDownRight"},
					{name:"rotateOutUpLeft"},{name:"rotateOutUpRight"},{name:"hinge"},
					{name:"rollIn"},{name:"rollOut"},{name:"zoomIn"},
					{name:"zoomInDown"},{name:"zoomInLeft"},{name:"zoomInRight"},
					{name:"zoomInUp"},{name:"zoomOut"},{name:"zoomOutDown"},
					{name:"zoomOutLeft"},{name:"zoomOutRight"},{name:"zoomOutUp"},
					{name:"slideInDown"},{name:"slideInLeft"},{name:"slideInRight"},
					{name:"slideInUp"},{name:"slideOutDown"},{name:"slideOutLeft"},
					{name:"slideOutRight"},{name:"slideOutUp"}
					],
					name:"bounce",
				},
				mounted: function() {
					$("#main1").addClass("animated");
				},
				methods: {
					sele:function(e){
						$("#main1").removeClass(this.name).addClass(e.target.value);
						this.name =  e.target.value;
					},
					agen:function(){
						let name = this.name;
						$("#main1").removeClass(name);
						setTimeout(function(){
								$("#main1").addClass(name);
						},0)
					},
				},
			})
	
</script>
	</body>
</html>
